<template>
    <div class="select-seat-header-container">
        <nut-cell>
            <div class="content">
                <div class="left">
                    <div class="title">{{ info?.filmName }}</div>
                    <div class="desc">开场时间：{{ formatShowTime(info?.showTime) }}</div>
                    <div class="desc">{{ info.cinemaName }}</div>
                </div>
                <div class="right">
                    <div class="icon">
                        <Clock color="#858a99" size="0.6rem"></Clock>
                    </div>
                    <div class="distance">{{ info.duration }}分钟</div>
                </div>
            </div>
        </nut-cell>
    </div>
</template>
<script setup lang="ts">
import { Clock } from "@nutui/icons-vue-taro";
import { toRefs, computed } from "vue";
import moment from "moment"
// 【格式化】开场时间
const formatShowTime = computed(() => {
    return (str) => {
        var formattedTime = moment.unix(str / 1000).format('YYYY-MM-DD HH:mm');
        return formattedTime
    };
});// 【格式化】散场时间
const props = defineProps({
    info: {
        type: Object,
        required: true,
    },
});
const { info } = toRefs(props);
</script>
<style lang="scss">
.select-seat-header-container {
    display: flex;
    flex-direction: column;
    padding: 0 25px;
    background: #fff;

    .content {
        display: flex;
        flex-direction: row;
        height: 140px;
        width: 100%;

        .left {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-right: 35px;

            .title {
                font-weight: 500;
                color: #15181d;
                font-size: 32px;
            }

            .desc {
                color: #858a99;
                font-size: 24px;
                margin-top: 10px;
            }

            .title,
            .desc {
                display: -webkit-box;
                /* autoprefixer: ignore next */
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }

        .right {
            display: flex;
            flex-direction: row;
            align-items: center;

            .icon {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-right: 10px;
            }

            .distance {
                color: #858a99;
                font-size: 24px;

                .nut-price {
                    color: #858a99;
                }
            }
        }
    }
}
</style>
